<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>目美预约</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport"/>
    <meta name="description" content="这是一个 table 页面">
    <meta name="keywords" content="table">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" href="/assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="/assets/css/admin.css">
    <link rel="stylesheet" href="http://res.zhen-yee.com/res/assets/css/page/form.css">

    <link href="/kindeditor/themes/default/default.css" rel="stylesheet" />
    <link rel="stylesheet" href="/assets/datetimepicker/css/amazeui.datetimepicker.css">
    <link rel="stylesheet" href="/layer/css/modules/layer/default/layer.css">
    <link rel="stylesheet" href="/layer/css/layui.css">
    <script src="/kindeditor/kindeditor-all.js"></script>
    <script src="/cjwJs/kindEditor.js"></script>

</head>


<body style="padding: 10px 10px 20px 30px">
<!--<div style="padding:16px 16px 16px 16px;">-->
    <!-- <div class="hd"> -->
    <!-- <h1 class="page_title">目美预约</h1> -->
    <!-- <p class="page_desc">欢迎使用目美预约</p> -->
</div>
<div class="am-alert">
    欢迎使用目美自助预约
</div>
<hr data-am-widget="divider" style="" class="am-divider am-divider-default"/>
<form class="" action="confirm" id="dateform">
    <input type="text" name="shop" value="${shopId}" hidden/>
    <input type="text" name="technician" value="${technicianId}" hidden/>
    <input type="text" name="item" value="${itemId}" hidden/>
    <input type="text" name="time" value="${time}" hidden/>
    <fieldset data-uk-margin><b>预约日期</b>
        <select form="dateform" type="submit" name="date" onChange="submit()">选择时间
            <#list dates as dateValue>
                <#if (date = dateValue)>
                    <option selected value="${dateValue}" name="date" class="am-selected" style="margin: 10px 20px;">
                        ${dateValue}
                    </option>
                    <#else>
                        <option value="${dateValue}" name="date" class="am-selected" style="margin: 10px 20px;">
                            ${dateValue}
                        </option>
                </#if>
            </#list>
        </select>
    </fieldset>
</form>
<hr data-am-widget="divider" style="" class="am-divider am-divider-default"/>


<p>这里应该放店铺列表</p>
<hr data-am-widget="divider" style="" class="am-divider am-divider-default"/>
<ul class="am-avg-sm-8 am-thumbnails">
    <#list technicians as technician>
        <#if (technician.id = technicianId)>
            <!-- <div><img class="am-radius am-img-thumbnail" alt="140*140" src="${technician.logo}" width="140" height="140" /><p>sss</p></div> -->
            <a style="margin:0 15px;width:75px;position:relative;float:left;"
               href="confirm?shop=${shopId}&technician=${technician.id}&date=${date}"><img style="float:left"
                                                                                           class="am-radius am-img-thumbnail"
                                                                                           alt="75*75" width="75"
                                                                                           height="75"
                                                                                           src="${technician.image}"
                                                                                           width="140"
                                                                                           height="140"/><span
                    style="float:left;width: 75px;text-align: center;clear: both;">${technician.name}</span><i
                    style="float: left;position: absolute;padding: 0 24px;right: 2px;bottom: 25px;background: rgba(0,0,0,0.7);"
                    class="weui_icon_success_no_circle"></i></a>
        </#if>
        <#if (technician.id != technicianId)>
            <a style="margin:0 15px;width:75px;position:relative;float:left;"
               href="confirm?shop=${shopId}&technician=${technician.id}&date=${date}"><img
                    style="float:left" class="am-radius" alt="140*140" width="75" height="75"
                    src="${technician.image}" width="140" height="140"/><span
                    style="float:left;width: 75px;text-align: center;clear: both;">${technician.name}</span></a>
        </#if>
    </#list>
</ul>
<hr data-am-widget="divider" style="" class="am-divider am-divider-default"/>
<#list items as item>
    <#if (item.id = itemId)>
        <a href="confirm?shop=${shopId}&technician=${technicianId}&item=${item.id}&date=${date}">
            <button type="button" class="am-btn am-btn-primary">${item.name}<i class="weui_icon_success_no_circle"></i>
            </button>
        </a>
        <!-- <button class="am-btn am-btn-success am-btn-xs am-radius" type="button" onClick="confirmclick(this)">[${item.name}]</button> -->
        <#else>
            <a href="confirm?shop=${shopId}&technician=${technicianId}&item=${item.id}&date=${date}">
                <button type="button" class="am-btn am-btn-default">${item.name}</button>
            </a>
            <!-- <button class="am-btn am-btn-success am-btn-xs am-radius" type="button" onClick="confirmclick(this)">${item.name}</button> -->
    </#if>
</#list>
<hr data-am-widget="divider" style="" class="am-divider am-divider-default"/>
<ul class="am-avg-sm-3 am-avg-md-4 am-avg-lg-8 am-thumbnails">
    <#list times as time>
        <#if (time.index < 20) || (time.index >= 44)>
        <#else>
            <#if (time.flag)>
                <#if (time.selected)>
                    <li>
                        <a href="confirm?shop=${shopId}&technician=${technicianId}&item=${itemId}&time=${time.index}&date=${date}">
                            <button type="button" class="am-btn am-btn-primary">${time.time}<i
                                    class="weui_icon_success_no_circle"></i></button>
                        </a></li>
                    <!-- <button class="am-btn am-btn-success am-btn-xs am-radius" type="button" onClick="confirmclick(this)">[+${time.time}+]</button> -->
                    <#else>
                        <!-- <button class="am-btn am-btn-success am-btn-xs am-radius" type="button" onClick="confirmclick(this)">+${time.time}+</button> -->
                        <li>
                            <a href="confirm?shop=${shopId}&technician=${technicianId}&item=${itemId}&time=${time.index}&date=${date}">
                                <button type="button" class="am-btn am-btn-default">${time.time}</button>
                            </a></li>
                </#if>
                <#else>
                    <#if (time.selected)>
                        <!-- <button class="am-btn am-btn-success am-btn-xs am-radius" type="button" onClick="confirmclick(this)">[-${time.time}-]</button> -->
                        <li><p>[${time.time} 不可预约]</p></li>
                        <#else>
                            <!-- <button class="am-btn am-btn-success am-btn-xs am-radius" type="button" onClick="confirmclick(this)">-${time.time}-</button> -->
                            <li><p>${time.time} 不可预约</p></li>
                    </#if>
            </#if>
            </#if>
    </#list>
</ul>

<form action="bookConfirm" method="get" onsubmit="return checkValue();">

    <div class="weui_cells weui_cells_form">
        <div class="weui_cell">
            <div class="weui_cell_hd"><label class="weui_label">姓名</label></div>
            <div class="weui_cell_bd weui_cell_primary">
                <input id="nameField" class="weui_input" type="text" name="name" placeholder="请输入客人姓名"/>
            </div>
        </div>
        <div class="weui_cell">
            <div class="weui_cell_hd"><label class="weui_label">电话</label></div>
            <div class="weui_cell_bd weui_cell_primary">
                <input id="mobileField" class="weui_input" type="number" name="mobile" pattern="[0-9]*"
                       placeholder="请输入客人电话"/>
            </div>
        </div>
        <div class="weui_cell">
            <div class="weui_cell_hd"><label class="weui_label">备注</label></div>
            <div class="weui_cell_bd weui_cell_primary">
                <input id="markField" class="weui_input" type="text" name="mark" placeholder="请输入备注(选填)"/>
            </div>
        </div>
    </div>
    <input type="text" name="shop" value="${shopId}" hidden/>
    <input type="text" name="technician" value="${technicianId}" hidden/>
    <input type="text" name="item" value="${itemId}" hidden/>
    <input type="text" name="time" value="${time}" hidden/>
    <input type="text" name="date" value="${date}" hidden/>
    </br>
    <input class="weui_btn weui_btn_primary" type="submit" value="提交">
    <!-- <a href="javascript:;" class="weui_btn weui_btn_primary" onClick="submitInfo()">按钮</a></input> -->
</form>


<!-- <button onclick="checkValue()">加载html</button> -->
<a id="submit" href="confirm?shop=${shopId}&technician=${technicianId}&item=${itemId}&time=${time}&date=" hidden></a>

</div>
<div style="padding:16px 16px 16px 16px;">

</body>

<script>
    //    function test(sid){
    //        sid.previousSibling.checked = true;
    //        var radiostyle = document.getElementsByTagName("name")
    //        var nameid = document.getElementsByClassName("tech-img");
    //        for(var i=0;i<nameid.length;i++)
    //        {
    //            nameid[i].firstChild.nextSibling.style.border = "none"
    //        }
    //        sid.style.border = "1px solid blue";
    //    }

    function submitInfo() {
        var form = document.getElementById("bookConfirm")
        form.submit()
    }

    function checkValue() {

        // alert(UE.getEditor('editor').getAllHtml())
        var name = document.getElementById("nameField").value
        var mobile = document.getElementById("mobileField").value

        if (name == "") {
            // alert('请填写预约客人姓名');
            layer.msg('请填写预约客人姓名');
            return false
        }

        if (mobile == "") {
            // alert('请填写预约客人电话');
            layer.msg('请填写预约客人电话');
            return false
        }
        else {
            return true
        }
    }
</script>
</html>